<ion-header>

  <ion-navbar>
    <ion-title>{{ 'CARDS_TITLE' | translate }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-card *ngFor="let item of cardItems">

    <ion-item>
      <ion-avatar item-start>
        <img [src]="item.user.avatar">
      </ion-avatar>
      <h2>{{item.user.name}}</h2>
      <p>{{item.date}}</p>
    </ion-item>

    <img [src]="item.image">

    <ion-card-content>
      <p>{{item.content}}</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
            <ion-icon name='thumbs-up'></ion-icon>
            12 Likes
          </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
            <ion-icon name='text'></ion-icon>
            4 Comments
          </button>
      </ion-col>
      <ion-col center text-center>
        <ion-note>
          11h ago
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>